<template>
	<view class="help">
		<navbar :title="$t('new.faq')" background="#ffffff"></navbar>
		<template>
			<image src="@/static/image/faq/qa_image.png" style="width: 750rpx;height: 630rpx;" mode="" />
			<view class="qa">
				<view class="qa-box" v-for="(item, index) in itemList" :key="index">
					<view class="qa-item" @click="onQaClick(index)">
						<view  class="qa-text">
							<image src="@/static/image/faq/qicon.png" style="position:absolute;top:26rpx;left:0;width:10rpx;height:50rpx;" mode="" />
							<view v-html="item.title" style="padding: 34rpx 38rpx 34rpx 38rpx;">

							</view>
							<template v-if="!qaOpen[index]">
								<view style="margin:8rpx 25rpx 0 25rpx;border-top:2rpx dashed #FFF;"></view>
								<view style="line-height:40rpx;height:40rpx;width:100%;overflow:hidden;text-align:right;">
									<image style="width:28rpx;height:27rpx;margin:auto 25rpx 0 auto;" src="@/static/image/faq/pull-down.png" mode="" />
								</view>
							</template>
							<template v-if="qaOpen[index]">
								<view class="answer-text" style="display:flex;position:relative;">
									<image src="@/static/image/faq/aicon.png" style="position:absolute;top:26rpx;right:0;width:10rpx;height:50rpx;" mode="" />
									<view  v-html="item.content">

									</view>
								</view>
								<view style="background:#FFF;line-height:40rpx;height:40rpx;width:100%;overflow:hidden;text-align:right;">
									<image style="width:28rpx;height:27rpx;margin:auto 25rpx 0 auto;" src="@/static/image/faq/pull-up.png" mode="" />
								</view>
							</template>
						</view>
					</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	import {
		pingtai_picture,
		faqlist
	} from '@/api/home.js'
	export default {
		data() {
			return {
				itemList: [],
				itemContent: '',
				tabIndex:0,
				qaOpen:[false,false,false,false]
			}
		},
		onLoad() {
			this.questionList()
		},
		mounted() {

		},
		computed: {
			qa() {
				// for (let i of this.$t('finance.qa')) {
				// 	this.qaOpen.push(false)
				// }
				return this.$t('finance.qa')
			}
		},
		methods: {
			show(name) {
				this.question[name].val = !this.question[name].val
			},
			clickCollapse(id) {
				uni.navigateTo({
					url: `./help_detail?id=${id}`
				})
			},
			questionList() {
				uni.showLoading({
					mask: true
				})
				faqlist().then(res => {
					this.itemList = res
					uni.hideLoading()
				}).catch(() => {
					uni.hideLoading()
				})
				pingtai_picture().then(res => {
					this.itemContent = res?res.content : ''
					uni.hideLoading()
				}).catch(() => {
					uni.hideLoading()
				})
			},
			onTabClick(val) {
				this.tabIndex = val;
			},
			onQaClick(val) {
				console.log(123123123)
				this.$nextTick(() => {
					this.qaOpen[val] = !this.qaOpen[val];
				})
				this.$forceUpdate()
				
			},
		},

	}
</script>

<style lang="scss" scoped>
	.iconb {
		display: flex;
		align-items: center;
	}
	.icon_qr {
		display: inline-block;
		width: 10rpx;
		height: 10rpx;
		background: #a9a9a9;
		border-radius: 50%;
		margin-right: 8rpx;
		opacity: .4;
	}
	.u-collapse-item {
		border-bottom: 2rpx solid #E9ECEF;
		&:last-child {
			border-bottom: none
		}
	}
	.qa {
		margin-top: 40rpx;
		padding: 0 21rpx 0 29rpx;
		.qa-box {
			margin-bottom: 40rpx;
			.qa-item {
				box-shadow: 0px 0px 10rpx 2rpx rgba(207, 217, 243, 0.4);
				border-radius: 20rpx;
				background: #fff;
			}
			.qa-text {
				position: relative;
				overflow: hidden;
				margin-left: auto;
				color: #5C5C5C;
				font-size: 30rpx;
				
				
				transition: all 0.3s ease-in-out 0s;
				height: auto;
			}
			.answer-text {
				margin-left: auto;
				color: #111017;
				font-size: 32rpx;
				// border-radius: 0 0 20rpx 20rpx;
				border-top: 2rpx solid #E1E8F7;
				background: #fff;
				transition: all 0.3s ease-in-out 0s;
				padding: 38rpx 36rpx 15rpx 36rpx;
			}
		}
	}
	.daily-tabs {
		position: fixed;
		top: calc( var(--status-bar-height) + 88rpx);
		z-index: 9999;
		background: rgba(172, 217, 255, .5);
		width: 100vw;
		margin:auto;
		border-radius: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		.tab-box {
			transition: all .5s ease-in-out;
			border-radius: 4rpx;
			
			height: 100rpx;
			text-align: center;
			color: #fff;
			font-size: 24rpx;
			padding: 7rpx;
			width: calc(100vw - 480rpx);
			background: #0F0F0E;
			&-active {
				background: #FF8E20;
				color: #fff;
				line-height: 80rpx;
				font-size: 34rpx;
				width: 480rpx;
				.text {
					height: 100%;
					width:100%;
				}
			}
		}
		.align-center-vertical{
			display: flex;
			align-items: center;
			justify-content: space-around;
			flex-direction: column;
		}
	}
	.help {
		padding-bottom: 30rpx;
		min-height: 100vh;
		.help_top {
			width: 748rpx;
			height: 392rpx;
			background: url('../../static/image/faq/bg_FAQ.png');
			background-size: 100%;
			// image {
			// 	width: 100%;
			// 	height: 100%;
			// }
		}

		.help_main {
			background: #fff;
			margin-top: -46rpx;
			border-radius: 60rpx 60rpx 0rpx 0rpx;
			height: 400rpx;
			width: 100%;
			padding-top: 40rpx;

			.help_main_title {
				width: 100%;
				padding: 30rpx 30rpx 20rpx 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 2rpx solid #E9ECEF;

				.help_main_title_name {
					font-weight: bold;
					font-size: 32rpx;
					height: 20rpx;
				}

				.help_main_title_url {
					font-size: 24rpx;
					color: #DCDCDC;
				}
			}

			.help_main_item {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				width: 100%;
				// padding-right: 20rpx;
				border-bottom: 2rpx solid #E9ECEF;
				padding: 20rpx;

				.help_main_item_icon {
					width: 35%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					padding: 0 20rpx;
					
					.help_main_item_icon_url {
						width: 60rpx;
						height: 60rpx;
						
						image {
							width: 100%;
							height: 100%;
						}
					}
					.help_main_item_icon_title {
						text-align: center;
						color: #A9A9A9;
					}
					
				}

				.help_main_item_content {
					width: 65%;
				}
			}

		}

		.mar_bottom {
			margin-bottom: 50rpx;
		}

	}
</style>
